<template>
	<view>
		<view class="box">

			<view class="pl30 pr30">
				<view class="pt25 pb25 pl20 pr20 flex_box aic tip-header-hsd">
					<view class="item">
						<text>共：</text>
						<text class="text-[#FF4907]">{{sum.num}} </text>
						<text class="ml5"> 台，预计：</text>
						<text class="fs30 text-[#FF4907]">￥{{sum.price}}</text>
					</view>
					<view @click="deleteAllHand">
						<text >清空回收单</text>
						<image src="../../static/icon_r_02.png" class="img_2 vt ml10"></image>
					</view>
				</view>
				
				<view style="height: 100rpx;"></view>

				<view class="r_area_block_1 mb30" v-for="(item,index) in hsdList" :key="index">
					<view class="pt25 pb25 r_bb1"><text class="fs30 fwb">{{item.cat_tow_name}}</text><text
							class="ml30 fs24 cor_aaa">{{item.cat_one_name}}</text></view>
					<view class="mt25 mb20 flex_box aic " v-for="(value,index) in item.child" :key="index">
						<view class="item">
							<view class="flex_box aic">
								<view class="item ">
									<text class="fs30">{{value.product_name}}</text>
									<!-- <text class="ml10 fs28  cor_aaa">{{value.level_name}}</text> -->
								</view>
								<view class="fs30 ">{{value.level_name}}</view>
							</view>
							<view class="mt25 flex_box aic">
								<view class="item">
									<view class="fs30 cor_aaa">预计收益</view>
								</view>
								<view>
									{{value.num}} * {{value.price}} = 
										<text class="fs30 text-[#FF4907]">￥{{(value.price * value.num).toFixed(2)}}</text>
								</view>
							
							</view>
							<view class="mt25 flex_box aic">
								<view class="item">
									<!-- v-model="item.num" -->
									<u-number-box v-model="value.num"></u-number-box>
								</view>
								<image @click="deleteHand(value)"  src="../../static/icon_r_04.png" class="img_2 vt"></image>
							</view>
						</view>
					</view>
				</view>
				
				
				<view v-if="hsdList.length <= 0" class="mt-[300rpx]">
					<u-empty text="发货单为空" mode="order"></u-empty>
				</view>
				
						
			</view>

			<!-- 合计 -->
			<view class="amount_money_fix">
				<view class="flex_box aic">
					<view class="s_btn_1" @click="jstj">继续添加</view>
					<view class=" s_btn_2" @click="tjfh">提交发货</view>
				</view>
			</view>


		</view><!-- box -->
		<view style="height: 300rpx;"></view>
			<tabbar />
	</view>
</template>

<script setup lang="ts">
	import { onLoad, onShow, onPageScroll } from '@dcloudio/uni-app'
	import { computed, reactive, ref, shallowRef, watch, nextTick } from 'vue'
	import { hsdGet, hsdDelAll,hsdDel,getNumPirce } from "@/utils/hsd.ts";
	import { storeToRefs } from 'pinia'
	import { useUserStore } from '@/stores/user'
	const userStore = useUserStore()
	const { userInfo, isLogin } = storeToRefs(userStore)
	const hsdList = ref([]);
	const sum = reactive({
		price:0,
		num:0,
	})

const tjfh = () => {
	uni.navigateTo({
		url:'/pages/order/order?type=1'
	})
}

	const jstj = () => {
		let pages = getCurrentPages(); // 页面对象
		let prevpage = pages[pages.length - 2] || {}; // 上一个页面对象
		let path = prevpage?.route;
		if(path == "pages/product/product"){
			uni.navigateBack()
		}else{
			uni.navigateTo({
				url:'/pages/product/product'
			})
		}
		console.log(path)
	}

	const deleteAllHand = () => {
		uni.showModal({
			title: '提示',
			content: `确认清空发货单吗？`,
			success: function (res) {
				if (res.confirm) {
					hsdDelAll();
					getData();
				} 
			}
		});
	}

	const deleteHand = (item:any) => {
		uni.showModal({
			title: '提示',
			content: `确认删除 ${item.product_name}-${item.level_name} 吗？`,
			success: function (res) {
				if (res.confirm) {
					hsdDel(item.price_id);
					getData();
				} 
			}
		});
	
	}


	const getData = () => {
		var list = hsdGet();
		//取出 一级分类
		var p = [];
		var cat = [];
		list.forEach((value, index) => {
			value.index = index;
			//一级分类
			var findIndex = p.findIndex(v => v.cat_one_id == value.cat_one_id);
			if (findIndex <= -1) {
				p.push({
					cat_one_id: value.cat_one_id,
					cat_one_name: value.cat_one_name,
					child: [],
				});
			}
			//二级分类为顶级分类
			var findCatIndex = cat.findIndex(v => v.cat_tow_id == value.cat_tow_id);
			if (findCatIndex <= -1) {
				cat.push({
					cat_tow_id: value.cat_tow_id,
					cat_one_id: value.cat_one_id,
					cat_one_name: value.cat_one_name,
					cat_tow_name: value.cat_tow_name,
					child: [],
				});
			}
		})

		//将产品 放入     cat  里
		list.forEach(value => {
			var index = cat.findIndex(v => v.cat_tow_id == value.cat_tow_id);
			if (index > -1) {
				cat[index].child.push({ ...value, checked: false });
			}
		});

		hsdList.value = cat;
		let _data =getNumPirce();
			sum.price = _data.price;
			sum.num = _data.num
		
	}

	onShow(() => {
		if(!isLogin.value){
			uni.navigateTo({
				url:'/pages/login/login'
			})
		}
		getData();
	
	})
</script>

<style>
	page {
		background: #F4F6F8;
		padding-bottom: calc(200rpx + env(safe-area-inset-bottom));
	}

	.tip-header-hsd{
		position: fixed;
		box-shadow: 0rpx 10rpx 30rpx 0rpx #E9E9E8;
		width: 100vw;
		z-index: 9;
		left: 0;
		/* padding: 0 20rpx; */
		/* width: 750rpx; */
		
		background: #FFFFFF;
	}

	.r_area_block_1 {
		position: relative;
		padding: 0 30rpx 36rpx;
		background: #fff;
		border-radius: 10rpx;
	}

	.amount_money_fix {
		position: fixed;
		width: 100%;
		padding: 22rpx 20rpx;
		left: 0;
		/* bottom: env(safe-area-inset-bottom); */
		bottom: calc(100rpx + env(safe-area-inset-bottom));
		background: #fff;
		z-index: 5;
	}

	.s_btn_1 {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: calc(50% - 20rpx);
		height: 76rpx;
		font-size: 26rpx;
		color: #FF4907;
		/* box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(41,255,154,0.5); */
		border-radius: 38rpx;
		border: 1rpx solid #FF4907;
		margin-right: 10rpx;
	}

	.s_btn_2 {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: calc(50% - 20rpx);
		height: 80rpx;
		font-size: 26rpx;
		color: #fff;
		background: linear-gradient(180deg, rgba(255,73,7,.6) 0%, rgba(255,73,7,1) 100%);
		/* box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(41, 255, 154, 0.5); */
		border-radius: 40rpx;
		margin-left: 10rpx;
	}
</style>